<template>
  <div class="shoper">
   <HomeShop :sources="homeShops"></HomeShop>
  </div>
</template>

<script>
import HomeShop from "@/components/HomeShop.vue";
export default {
  name: "Shoper",
   data: function() {
    return {
      homeDatas: [],
      homeShops: []
    };
  },
  components: {
    HomeShop
  },
  created() {
    // axios进行网络请求时返回的数据是一个Promise对象
    // axios可以实现多个网络请求同时发送，并且通过spread将返回结果按照请求的发送顺序依次返回
    this.$axios.all([this.getHomeData(), this.getRestaurants()]).then(
      this.$axios.spread((datas1, datas2) => {
        for (let index in datas1.data.data) {
          this.homeDatas.push(datas1.data.data[index]);
        }
        for (let index in datas2.data.data) {
          this.homeShops.push(datas2.data.data[index]);
        }

        console.log(datas1);
        console.log(datas2);
      })
    );
  },
  methods: {
    getHomeData() {
      return this.$axios.get("/api/common/getHomeData");
    },
    getRestaurants() {
      return this.$axios.get("/api/shopping/restaurants");
    }
  },
// created() {
//    this.$axios
//       .get("/api/shopping/restaurants")
//       .then(res => {
//         this.homeShops = res.data;
//       })
//       .catch(err => {
//         console.log(err);
//       });



// //     // axios进行网络请求时返回的数据是一个Promise对象
// //     // axios可以实现多个网络请求同时发送，并且通过spread将返回结果按照请求的发送顺序依次返回
// //     this.$axios.all([this.getHomeData(), this.getRestaurants()]).then(
// //       this.$axios.spread((datas1, datas2) => {
// //         for (let index in datas1.data.data) {
// //           this.homeDatas.push(datas1.data.data[index]);
// //         }
// //         for (let index in datas2.data.data) {
// //           this.homeShops.push(datas2.data.data[index]);
// //         }

// //         console.log(datas1);
// //         console.log(datas2);
// //       })
// //     );
// //   },
// //   methods: {
// //     getHomeData() {
// //       return this.$axios.get("/api/common/getHomeData");
// //     },
// //     getRestaurants() {
// //       return this.$axios.get("/api/shopping/restaurants");
// //     }
//   },

  beforeRouteEnter: (to, from, next) => {
    console.log(to, from);
    //组件内守卫 在执行next的时候，会通过next对应的回调函数返回当前组件的vue实例对象

    next(vm => {
      vm.$store.commit("changeBack", true);
      vm.$store.commit("changeTabBar", false);
      // changeTabBar记得大写
    }); //
  },
  beforeRouteLeave (to, from, next) {
    // console.log(to, from);
    this.$store.commit("changeBack", false);
    if (to.meta.index < from.meta.index) {
      // 返回上一级页面时显示tabBar
      this.$store.commit("changeTabBar", true);
    }

    //将路由交给下一个守卫完成
    next();
  }
};
</script>

<style lang="less" scoped>
.shoper {
  width: 100%;
  height: 100%;
  
  color: #fff;
  font-size: 30px;
}
</style>
